<template>
	<view class="c-content">
		<view class="add-recode">
			<u-toast ref="uToast"></u-toast>
			<view class="add-type">
				<text class="type-title r-flex">类型:</text>
				<u-radio-group v-model="partyType" placement="row">
					<u-radio :customStyle="{marginRight: '16px'}" v-for="(item, index) in partyTypeList" :key="index"
						:label="item.name" :name="item.name" @change="typeChange" activeColor="#1C5AD2">
					</u-radio>
				</u-radio-group>
			</view>
			<view class="add-type" style="padding-bottom: 10px;">
				<text class="type-title r-flex">委托方:</text>
				<u-switch activeColor="#1C5AD2" v-model="wtType" @change="wtChange"></u-switch>
			</view>
			<u-gap height="12" bgColor="#f7f6fa"></u-gap>
			<view class="add-type">
				<text class="type-title r-flex" style="padding-bottom: 0;">{{label}}</text>
				<u-input placeholder="请输入" border="bottom" v-model="partyInfo.name" maxlength="20" clearable>
				</u-input>
			</view>
			<view class="add-type" style="padding-bottom: 10px;">
				<text class="type-title r-flex" style="padding-bottom: 0;">属性:</text>
				<u-input ref="attrBtn" placeholder="请选择" border="bottom" v-model="partyInfo.attr" maxlength="20"
					:readonly="true" @click.native="focus">
				</u-input>
			</view>
			<u-gap height="12" bgColor="#f7f6fa"></u-gap>
			<view class="add-type" v-if="partyType=='个人'">
				<text class="type-title r-flex">性别:</text>
				<u-radio-group v-model="sexType" placement="row">
					<u-radio :customStyle="{marginRight: '16px'}" v-for="(item, index) in sexTypeList" :key="index"
						:label="item.name" :name="item.name" @change="typeChange" activeColor="#1C5AD2">
					</u-radio>
				</u-radio-group>
			</view>
			<view class="add-type" style="padding-bottom: 10px;" v-if="partyType=='个人'">
				<text class="type-title r-flex" style="padding-bottom: 0;">民族:</text>
				<u-input placeholder="请输入" border="bottom" v-model="partyInfo.nation" maxlength="20" clearable>
				</u-input>
			</view>
			<u-gap height="12" bgColor="#f7f6fa" v-if="partyType=='个人'"></u-gap>
			<view class="add-type">
				<text class="type-title r-flex" style="padding-bottom: 0;">联系电话:</text>
				<u-input placeholder="请输入" border="bottom" v-model="partyInfo.mobile" maxlength="20" clearable>
				</u-input>
			</view>
			<view class="add-type" v-if="partyType=='个人'">
				<text class="type-title r-flex" style="padding-bottom: 0;">证件号码:</text>
				<u-input placeholder="请输入" border="bottom" v-model="partyInfo.idNum" maxlength="20" clearable>
				</u-input>
			</view>
			<view class="add-type" style="padding-bottom: 10px;">
				<text class="type-title r-flex" style="padding-bottom: 0;">{{locate}}</text>
				<u-input placeholder="请输入" border="bottom" v-model="partyInfo.address" maxlength="20" clearable>
				</u-input>
			</view>
			<u-gap height="12" bgColor="#f7f6fa"></u-gap>
			<view class="add-type" v-if="partyType=='单位'">
				<text class="type-title r-flex" style="padding-bottom: 0;">法人代表:</text>
				<u-input placeholder="请输入" border="bottom" v-model="partyInfo.attr" maxlength="20" clearable>
				</u-input>
			</view>
			<view class="add-type" style="padding-bottom: 10px;" v-if="partyType=='单位'">
				<text class="type-title r-flex" style="padding-bottom: 0;">统一社会信用代码:</text>
				<u-input placeholder="请输入" border="bottom" v-model="partyInfo.attr" maxlength="20" clearable>
				</u-input>
			</view>
			<u-gap height="12" bgColor="#f7f6fa" v-if="partyType=='单位'"></u-gap>
			<view class="add-type" style="padding-bottom: 10px;">
				<text class="type-title r-flex">备注:</text>
				<u--textarea v-model="partyInfo.summary" placeholder="请输入内容" count>
				</u--textarea>
			</view>
		</view>
		<u-gap height="12" bgColor="#fff"></u-gap>
		<view class="add-btn">
			<u-button @click="saveInfo()" shape="circle" color="#1C5AD2">保存</u-button>
		</view>
		<u-picker :show="attrShow" :columns="attrList" confirmColor="#1C5AD2" @change="attrChange" @cancel="attrCancel"
			@confirm="attrConfirm">
		</u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 基本案列数据
				partyTypeList: [{
						name: '个人',
						disabled: false
					},
					{
						name: '单位',
						disabled: false
					}
				],
				partyType: "个人",
				wtType: false,
				sexType: "",
				sexTypeList: [{
						name: '男',
						disabled: false
					},
					{
						name: '女',
						disabled: false
					}
				],
				attrShow: false,
				attrList: [
					['原告', '被告', '上诉人', '申请人']
				],
				partyInfo: {
					id: "",
					address: "",
					attr: "",
					idNum: "",
					mobile: "",
					name: "",
					nation: "",
					sex: "",
					summary: "",
					caseId: ""
				}
			}
		},
		// 获取当事人信息并初始值
		onLoad: function(option) {
			const that = this;
			// 接收当事人详情数据
			const resObj = JSON.parse(decodeURIComponent(option.item));
			// if(partyInfo.wtType=="委托方") {
			// 	this.wtType = true;
			// }
			// 获取两个对象的交集
			Object.keys(that.partyInfo).map(function(key) {
				resObj[key] && (that.partyInfo[key] = resObj[key]);
			})
			// 判断0/1，返显数据
			if (that.partyInfo.sex == "0") {
				that.sexType = "男"
			} else {
				that.sexType = "女"
			}
		},
		watch: {
			'this.partyInfo.sex'(val) {
				// 判断0/1，返显数据
				if (val == "0") {
					this.sexType = "男";
				} else {
					this.sexType = "女"
				}
			}
		},
		// 计算属性变化展示不同内容
		computed: {
			label() {
				if (this.partyType == "个人") {
					return "姓名:"
				}
				if (this.partyType == "单位") {
					return "单位名称:"
				}
			},
			locate() {
				if (this.partyType == "个人") {
					return "住所地:"
				}
				if (this.partyType == "单位") {
					return "单位地址:"
				}
			}
		},
		methods: {
			// 选择类型
			typeChange(n) {
				if (n == "男") {
					this.partyInfo.sex = "0";
				} else {
					this.partyInfo.sex = "1";
				}
			},
			// 是否委托
			wtChange(e) {
				// console.log('wtChange', e);
			},
			// 保存当事人信息
			saveInfo() {
				const that = this;
				let data = this.partyInfo;
				uni.showLoading({
					title: "加载中"
				})
				if (this.sexType == "男") {
					data.sex = "0";
				} else {
					data.sex = "1";
				}
				this.$sendRequest.partyUpdate(data).then((res) => {
					uni.hideLoading();
					if (res.code == 200) {
						uni.navigateBack({
							url: '/pages/caseList/party/partyDetail'
						})
					} else {
						this.$refs.uToast.show({
							message: res.message,
							type: 'error',
						})
					}
				}).catch(err => {})
			},
			attrChange() {

			},
			attrCancel() {
				this.attrShow = false;
			},
			// 保存
			attrConfirm(e) {
				this.partyInfo.attr = e.value.join('');
				this.attrShow = false;
			},
			// 聚焦时选择属性
			focus() {
				this.attrShow = true;
				uni.hideKeyboard()
				// 绑定点击事件
				// this.$refs['attrBtn'].blur();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.c-content {
		min-height: 100vh;
		background-color: #fff;
		padding-bottom: 60rpx;
	}

	.add-recode {
		width: 100%;

		.add-type {
			padding: 0rpx 24rpx 8rpx 24rpx;

			.type-title {
				padding-top: 24rpx;
			}
		}
	}

	/* 保存 */
	.add-btn {
		width: 100%;
		padding: 24rpx 12%;
		padding-bottom: 30rpx;
	}

	.add-btn /deep/ .u-button {
		font-size: 30rpx;
		height: 72rpx;
		line-height: 72rpx;
		box-shadow: 0px 0px 24px 0px rgba(28, 90, 210, 0.31);
		margin-top: 0rpx;
	}
</style>